<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    *{margin:0;padding:0}
    html,body{height:100%;}
    body{
      background:url(less/images/2.jpg) no-repeat;
      background-attachment:fixed;/*背景图固定*/
    }
    ul{width:700px;margin:0 auto;}
    ul li{
      display: inline-block;list-style: none;
      width:100px;height:100px;
      padding:20px;margin:10px;
      border:20px solid rgba(15,195,59,0.4);
      background: url(less/images/1.jpg) no-repeat;
      /* background-position: 10px 10px; */
      background-size: 100% 100%;/*全区域显示会变形*/
      background-size: contain;/*有留白，但显示完整*/
      background-size: cover;/*无留白，但显示不完整*/
    }
    ul li:nth-child(1){
      /*从边框区开始*/
      background-origin: border-box;
      /*阴影
      box-shadow: h水平 v垂直 blur模糊 spread扩展 color颜色 inset内阴影，默认外;
                正左负右 正下负上       正外扩负缩
      */
      /* box-shadow: 0 5px 10px 0 green; */
      /* box-shadow: 10px 0 10px -5px green;单边阴影 */
      box-shadow: 0 0 0 5px green;/*只设置扩展，外边框效果*/
      box-shadow: 0 5px 20px 0 green inset;/*内阴影，方向和外相反*/
    }
    ul li:nth-child(2){
      /*从padding区开始，默认*/
      background-origin: padding-box;
    }
    ul li:nth-child(3){
      /*从内容区开始*/
      background-origin: content-box;
    }
    ul li:nth-child(4){
      /*从边框区开始裁剪，默认*/
      background-clip: border-box;
    }
    ul li:nth-child(5){
      /*从padding区开始裁剪*/
      background-clip: padding-box;
    }
    ul li:nth-child(6){
      /*从内容区开始裁剪*/
      background-clip: content-box;
    }
    ul li:nth-child(7){
      /*图片叠加文字区域*/
      font-size:45px;
      color:transparent;
      -webkit-background-clip:text;
      background-clip:text;

      /*文字阴影*/
      text-shadow:1px 1px 3px green;
      /* -webkit-text-stroke:2px blue;文字内阴影 */
    }

    #div1{
      width:300px;height:200px;
      background: url(less/images/1.jpg) no-repeat;
      /*mask遮罩，图片不能跨域*/
      /* -webkit-mask-image:url(); */
      /*-webkit-mask-repeat: no-repeat; repeat平铺*/
      /* -webkit-mask-position: 50px 100px; */
    }

    /*
    filter滤镜属性：加-webkit-
    normail 正常
    grayscale(1) 灰度
    brightness(0.5) 亮度
    invert(1) 反色
    sepie(0.5) 叠加褐色
    hue-rotate(30deg) 色相
    saturate(4) 饱和度
    contrast(2) 对比度
    opacity(0.8) 透明度
    drop-shadow(0 0 20px red) 阴影
    */

    /* 盒子模型 */
    .box{
      box-sizing: border-box;  /*整个盒子的宽高，修改padding和border，盒子大小不变，只会让内容缩放*/
      box-sizing: padding-box; /*padding加内容的宽高*/
      box-sizing: content-box; /*默认值，内容的宽高，修改padding和border，盒子大小会改变*/
    }
    /* columns 多列布局 */
    .box1{
      width:850px;
      /*实现4列表布局，需要加-webkit-*/
      column-width:200px;  /*列宽度*/
      column-count:auto; /*自动算出几列*/
      column-gap:1.5em; /*列间距*/
      column-rule:1px dashed #ccc; /*列分割线*/

    }

    /* @media 媒体查询
    @font-face 导入字体图标 */
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>样式测试</li>
  </ul>
  <div id="div1"></div>
</body>
</html>